<template>
  <div>
    <!--头部-->
    <Header :chooseValue="3"></Header>
    <!--banner end-->
    <div class="jqgk" style="background:#FFF5E0">
      <div class="contai" style="max-width:1197px;">
        <div style="margin-top:20px">
          <div class="top_tit" style="text-align:left">
            <span
              class="titleFont"
              v-if="pcshow"
              style="color: #840207;"
              id="headline"
              >Photography Showcase</span
            >
            <span
              class="titleFont"
              v-if="!pcshow"
              style="font-size:36px;color: #840207;"
              id="headline"
              >Photography Showcase</span
            >
          </div>
          <div class="voiceTop" style="text-align:center">
            <p class="videoTopTitle">{{ title }}</p>
            <div class="travel_con">
              <!-- pc端 -->
              <el-carousel
                :interval="4000"
                type="card"
                height="300px"
                v-if="pcshow"
              >
                <el-carousel-item v-for="item in dataList" :key="item.key">
               
                    <img
                      v-if="item.type == 2"
                      :src="item.content"
                      style="width:100%;height:100%"
                      @click="openV(item)"
                    />
               
                </el-carousel-item>
              </el-carousel>
                <viewer :images="showDataList" v-show="false">
                <img
                  v-for="(src, index) in showDataList"
                  :src="src.content"
                  :key="index"
                  id="clickMe"
                />
              </viewer>
              <!-- 移动端 -->
              <el-carousel
                :interval="4000"
                type="card"
                height="100px"
                v-if="!pcshow"
              >
                <el-carousel-item v-for="item in dataList" :key="item.key">
                  <viewer :images="dataList">
                    <img
                      v-if="item.type == 2"
                      :src="item.content"
                      style="width:100%;height:100px"
                      @click="openV"
                    />
                  </viewer>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./header";
// import HeaderForBeauty from "./headerforbeauty";
import Footer from "./footer";
export default {
  components: { Footer, Header },
  data() {
    return {
      choseValue: 1,
      pcshow: false,
      styletable: {},
      mapStyle: {
        color: "#840207",
        background:
          "linear-gradient(270deg, rgba(132, 2, 7, 0.29), rgba(132, 2, 7, 0))"
      },

      dataList: [],
      showDataList:[],
      listCaiDan: [],
      title: "",
      chooseValue: 1
    };
  },
  beforeCreate() {},
  created() {
    let info = this.$route.query.id;
    if (info.title == undefined) {
      this.$router.push({
        path: "/photo"
      });
    } else {
      this.title = info.title;
      this.dataList = JSON.parse(info.details);
      if (this._isMobile()) {
        this.pcshow = false;
      } else {
        this.pcshow = true;
      }
    }
  },
  //  监听路由变化
  watch: {
    $route(to, from) {
      let info = to.query.id;
      this.title = info.title;
      this.dataList = JSON.parse(info.details);
    }
  },
  mounted() {},

  methods: {
    //选择菜单
    chooseTab(info) {
      this.chooseValue = info.id;
      this.title = info.title;
      this.init2();
    },
    //判断是PC端还是手机端
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    //描点跳转
    scrollTitle() {
      var PageId = document.querySelector("#headline");
      window.scrollTo({
        top: PageId.offsetTop - 40,
        behavior: "smooth"
      });
    },
    openV(e) {
      let arr = this.dataList;
      let arrList = [];
      arrList.push(e);
      arr.forEach(function(element) {
        if (element.key != e.key) {
          arrList.push(element);
        }
      });
      this.showDataList = arrList;
      setTimeout(function() {
        var btnclick = document.createEvent("MouseEvents");
        btnclick.initEvent("click", true, true);
        document.getElementById("clickMe").dispatchEvent(btnclick);
      }, 500);
    }
  }
};
</script>
<style>
.voiceTop {
  text-align: left;
  padding: 10px 60px 60px 60px;
  margin-top: 20px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.videoTopTitle {
  color: #840207;
  font-size: 24px;
  font-weight: bold;
}
.titleFont {
  font-size: 42px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: #840207;
  line-height: 36px;
}
</style>
